<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据接收日志</title>
    <link rel="stylesheet" href="element-ui.css">
    <style>
        html,body,.el-container{
            margin: 0;
            height:100%;
        }
        .app-menu{
            height: 100%;
        }
        .el-main {
            color: #333;
            text-align: center;
            padding: 0px;
        }
        .el-footer {
            color: #333;
            text-align: center;
            height: 35px !important;
        }
    </style>
</head>
<body>
<el-container id="receivelog">
    <el-main>
        <el-table
                :data="data"
                border
                :height="tableHeight+'px'"
                style="width: 100%">
            <el-table-column type="index" align="center" header-align="center"></el-table-column>
            <el-table-column prop="appName" label="appName" align="center" header-align="center"></el-table-column>
            <el-table-column prop="hostName" label="hostName" align="center" header-align="center"></el-table-column>
            <el-table-column prop="type" label="数据类型" align="center" header-align="center"></el-table-column>
            <el-table-column prop="collectTime" label="采集时间" align="center" header-align="center" :formatter="dateFormat"></el-table-column>
            <el-table-column prop="receiveTime" label="接收时间" align="center" header-align="center" :formatter="dateFormat"></el-table-column>
            <el-table-column prop="dealTime" label="处理时间" align="center" header-align="center" :formatter="dateFormat"></el-table-column>
            <el-table-column prop="dataSize" label="数据大小" align="center" header-align="center" :formatter="sizeFormat"></el-table-column>
        </el-table>
    </el-main>
    <el-footer style="text-align: center;">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400, 500]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-footer>
</el-container>
<script src="./vue.js"></script>
<script src="./element-ui.js"></script>
<script src="./axios.js"></script>
<script src="./moment.js"></script>
<script>
    new Vue({
      el: '#receivelog',
      data: {
        data: [
          // {dictionaryItemId: "1", dictionaryItemKey: "0~5", dictionaryItemValue: null, dictionaryTypeId: 1, dictionaryType: "cube_expand", leftValue: 0.000000, rightValue: 5.000000},
          // {dictionaryItemId: "2", dictionaryItemKey: "5~10", dictionaryItemValue: null, dictionaryTypeId: 1, dictionaryType: "cube_expand", leftValue: 5.000000, rightValue: 10.000000},
          // {dictionaryItemId: "2", dictionaryItemKey: "10~20", dictionaryItemValue: null, dictionaryTypeId: 1, dictionaryType: "cube_expand", leftValue: 10.000000, rightValue: 20.000000}
        ],
        total: 0,
        pageSize: 100,
        currentPage: 1,
        tableHeight: 100
      },
      computed: {
        getPageInfo: function() {
          return 'page=' + this.currentPage + '&limit=' + this.pageSize
        }
      },
      mounted: function() {
        this.tableHeight = document.querySelector('.el-main').offsetHeight
        this.loadData()
    },
      methods: {
        handleSizeChange(size) {
          this.pageSize = size
        },
        handleCurrentChange(page) {
          console.log(page)
          this.currentPage = page
          console.log(this.currentPage)
          this.loadData()
        },
        loadData() {
          axios.get(`log/queryPage?` + this.getPageInfo)
            .then(resp => resp.data.data)
            .then(data => {
              this.data = data.records
              this.total = data.total
              this.pageSize = data.limit
              this.currentPage = data.page
            })
            .catch(error => {
              this.$message.error(error.message)
            })
    },
        dateFormat: function(row, column) {
          var date = row[column.property]
          if (date == undefined) {
            return ''
          }
          return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
        sizeFormat: function(row, column) {
          var size = row[column.property]
          if (size == undefined) {
            return '0'
          }
          var unit = 'B'
          if (size > 1024 * 1024 * 1024) {
            size = size / (1024 * 1024 * 1024)
            unit = 'G'
          } else if (size > 1024 * 1024) {
            size = size / (1024 * 1024)
            unit = 'M'
          } else if (size > 1024) {
            size = size / 1024
            unit = 'K'
          }
          return Number(size).toFixed(2) + unit
        }
      }
    })
</script>
</body>
</html>